<template> 
<div>
  <el-row >
    <el-col :span="19">
      <div class="title2 title2-padding">遥控日志</div>
    </el-col>
    <el-col :span="5">
      <el-tag v-show="hasNews" type="warning">有新日志产生</el-tag>
    </el-col>
  </el-row>
<!--  <el-carousel-->
<!--    height="auto"-->
<!--    direction="vertical"-->
<!--    :autoplay="true"-->
<!--    :interval="intervalTime"-->
<!--    @change="sliceData"-->
<!--  >-->
<!--    <el-carousel-item v-for="item in pageTotal" :key="item" class="carousel-div">-->
      <el-table :data="logArr" style="height: 100%;" :empty-text="'暂无数据'" :max-height="400">
        <el-table-column prop="timestamp" label="时间" width="170px"></el-table-column>
        <el-table-column label="指令">
          <template #default="scope">
            <span>{{scope.row.id}} {{scope.row.name}}</span>
          </template>
        </el-table-column>
      <el-table-column label="参数" prop="parambytes">
        <template #default="scope">{{ tranlateBytes(scope.row) }}</template>
      </el-table-column>
      </el-table>
<!--    </el-carousel-item>-->
<!--  </el-carousel>-->
</div>
</template>

<script setup>
import {onBeforeMount, onBeforeUnmount, ref, watch, computed} from 'vue'
import { tranlateBytes } from '@/comm/index.js'
import { initTcLogsWs } from '@/api/wsObj.js'
import {useWsStore} from "@/stores/ws-module.js";

const intervalTime = 5000
let wsObj = ref(null)
let hasNews = ref(false)
let lastLogLen = ref(0)
const wsStore = useWsStore()
const logArr = computed(() => wsStore['history'])

const reciveLogs = (data) => {
  wsObj = initTcLogsWs()
}

const initData = () => {
  let newLen = logArr.value.length

  if (newLen > lastLogLen.value) {
    hasNews.value = true
    lastLogLen.value = newLen

    setTimeout(() => {
      hasNews.value = false
    }, intervalTime)
  }
}
watch(logArr.value, () => {
  initData()
})
onBeforeMount(() =>{
  reciveLogs()
})
onBeforeUnmount(() => {
  if (wsObj.value) {
    wsObj?.disconnect()
  }
})

</script>
<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}
.carousel-div {
  min-height: 240px;
  max-height: 540px;
}
</style>